<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link type='text/css' href='style.css' rel='stylesheet' media="all" />
<title>Create A Guest Profile</title>
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/date.js" type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
	type="text/javascript"></script>
<script language="Javascript">
	function xmlhttpPost(strURL) {
		var xmlHttpReq = false;
		var self = this;
		// Mozilla/Safari
		if (window.XMLHttpRequest) {
			self.xmlHttpReq = new XMLHttpRequest();
		}
		// IE
		else if (window.ActiveXObject) {
			self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
		}
		self.xmlHttpReq.open('POST', strURL, true);
		self.xmlHttpReq.setRequestHeader('Content-Type',
				'application/x-www-form-urlencoded');
		self.xmlHttpReq.onreadystatechange = function() {
			if (self.xmlHttpReq.readyState == 4) {
				updatepage(self.xmlHttpReq.responseText);
			}
		}
		self.xmlHttpReq.send(getquerystring());
	}

	function getquerystring() {
		qstr = '';
		return qstr;
	}

	function updatepage(str) {
		document.getElementById("countryComboBox").innerHTML = str;

	}
</script>
<script type="text/javascript">
	$(document).ready(function() {
		JavaScript: xmlhttpPost("jsp/countryComboBox.jsp");
		$.validator.addMethod("checkDate", function(value, element) {
			return Date.parseExact(value, "yyyy-MM-dd");
		}, "Please enter with format yyyy-MM-dd or this date isn't correct");
		$.validator.addMethod("isBirthday", function(value, element) {
			return Date.parse(value) < new Date();
		}, "Birthday can't be smaller than today");
		$("#hostRegister").validate({
			errorElement : "span",
			rules : {
				rePwd : {
					equalTo : "#password"
				},
				reEmail : {
					equalTo : "#email"
				},
				birthday : {
					checkDate : true,
					isBirthday : true
				}
			}
		});
	});
</script>
</head>
<body>
	<div id="header"></div>
	<script>
		$('#header').load('header.html');
	</script>
	<!-- call header -->
	<div id="wrap">
		<!-- content -->
		<div id="content_container">
			<div id="content_wrap">
				<div id="content" class="clr">
					<br>
					<br>
					<h2>Create A Guest Profile</h2>
					<br>
					<br>

					<form id="GuestRegister" method="post" action="CreateGuestUser">
						<label>User Name<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" type="text" name="userName"><br>
						<br> <label>Password<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" minlength="6" type="password"
							id="password" name="pwd"><br>
						<br> <label>Re-enter Password<span class="rq">
								* </span></label>&nbsp;&nbsp; <input class="required" type="password"
							name="rePwd"><br>
						<br> <label>First Name<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" type="text" name="firstName"><br>
						<br> <label>Last Name<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required" type="text" name="lastName"><br>
						<br> <label>Sex</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<select name="sex">
							<option value="1" selected>Male</option>
							<option value="2">Female</option>
						</select><br>
						<br> <label>Birthday<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="date1" type="text" name="birthday"
							value="yyyy-MM-dd"><br>
						<br> <label>Phone Number<span class="rq"></span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="digits" minlength="10" maxlength="11" type="text"
							id="phoneNumber" name="phoneNumber"><br>
						<br> <label>Email<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input class="required email" type="text" id="email" name="email"><br>
						<br> <label>Re-enter Email<span class="rq"> *
						</span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input
							class="required" type="text" name="reEmail"><br>
						<br>

						<div id="countryComboBox"></div>
						<br>
						<br>
						<br> <input type="submit" value='Register' name="register"><br>
					</form>
					<br>
					<br>

					<div id="footer"></div>
					<script>
						$('#footer').load('footer.html');
					</script>
					<!-- call footer -->
				</div>
				<!--content -->
			</div>
			<!--content_wrap -->
		</div>
		<!--content container -->
	</div>
	<!--wrap -->
</body>
</html>